/* ========== SECTION SPACING ========== */

/* Base section styling */
.section-padding {
    padding: 100px 0;
}

.bg-light {
    background-color: #f8f9fa !important;
}

/* Specific section adjustments */
#home.hero-section {
    padding: 140px 0 100px;
}

#about.section-padding {
    padding: 100px 0;
}

#skills.section-padding {
    padding: 100px 0;
}

#projects.section-padding {
    padding: 100px 0;
}

#experience.section-padding {
    padding: 100px 0;
}

#services.section-padding {
    padding: 100px 0;
}

#education.section-padding {
    padding: 100px 0;
}

#testimonials.section-padding {
    padding: 100px 0;
}

#process.section-padding {
    padding: 100px 0;
}

#blog.section-padding {
    padding: 100px 0;
}

#contact.section-padding {
    padding: 100px 0;
}

#cta.cta-section {
    padding: 100px 0;
}

/* Container margin adjustments */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Section header margins */
.section-header {
    margin-bottom: 60px;
}

.section-header.text-center {
    margin-bottom: 70px;
}

/* Content spacing within sections */
.about-content {
    margin-bottom: 40px;
}

.about-info {
    margin-top: 40px;
    margin-bottom: 30px;
}

.skills-grid {
    margin-top: 30px;
}

.project-card {
    margin-bottom: 30px;
}

.timeline {
    margin-top: 40px;
    margin-left: 20px;
}

.timeline-item {
    margin-bottom: 50px;
}

.service-card {
    margin-bottom: 30px;
}

.education-card {
    margin-bottom: 40px;
}

.certifications-grid {
    margin-top: 40px;
}

.testimonial-item {
    margin-bottom: 50px;
}

.process-step {
    margin-bottom: 60px;
}

.blog-card {
    margin-bottom: 30px;
}

.contact-form {
    margin-top: 50px;
}

/* Button spacing */
.mt-4 {
    margin-top: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

/* ========== RESPONSIVE SPACING ========== */

/* Large Devices (992px to 1199px) */
@media (max-width: 1199px) {
    .section-padding {
        padding: 90px 0;
    }
    
    #home.hero-section {
        padding: 120px 0 90px;
    }
    
    .section-header {
        margin-bottom: 50px;
    }
    
    .section-header.text-center {
        margin-bottom: 60px;
    }
    
    .timeline-item {
        margin-bottom: 45px;
    }
    
    .process-step {
        margin-bottom: 50px;
    }
}

/* Medium Devices (768px to 991px) - TABLET */
@media (max-width: 991px) {
    .section-padding {
        padding: 80px 0;
    }
    
    #home.hero-section {
        padding: 100px 0 80px;
    }
    
    .section-header {
        margin-bottom: 45px;
    }
    
    .section-header.text-center {
        margin-bottom: 50px;
    }
    
    .about-content {
        margin-bottom: 35px;
    }
    
    .about-info {
        margin-top: 35px;
        margin-bottom: 25px;
    }
    
    .skills-grid {
        margin-top: 25px;
        gap: 25px;
    }
    
    .project-card {
        margin-bottom: 25px;
    }
    
    .timeline {
        margin-top: 35px;
        margin-left: 15px;
    }
    
    .timeline-item {
        margin-bottom: 40px;
    }
    
    .service-card {
        margin-bottom: 25px;
    }
    
    .education-card {
        margin-bottom: 35px;
    }
    
    .certifications-grid {
        margin-top: 35px;
        gap: 15px;
    }
    
    .testimonial-item {
        margin-bottom: 40px;
        padding: 30px;
    }
    
    .process-step {
        margin-bottom: 40px;
    }
    
    .blog-card {
        margin-bottom: 25px;
    }
    
    .contact-form {
        margin-top: 40px;
        padding: 30px;
    }
    
    /* Adjust container padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
}

/* Small Devices (576px to 767px) - MOBILE LANDSCAPE */
@media (max-width: 767px) {
    .section-padding {
        padding: 70px 0;
    }
    
    #home.hero-section {
        padding: 90px 0 70px;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-header.text-center {
        margin-bottom: 45px;
    }
    
    .section-title {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .about-content {
        margin-bottom: 30px;
    }
    
    .about-info {
        margin-top: 30px;
        margin-bottom: 20px;
        padding: 25px;
    }
    
    .skills-grid {
        margin-top: 20px;
        gap: 20px;
    }
    
    .skill-card {
        padding: 25px;
    }
    
    .project-card {
        margin-bottom: 20px;
    }
    
    .project-content {
        padding: 20px;
    }
    
    .timeline {
        margin-top: 30px;
        margin-left: 10px;
    }
    
    .timeline-item {
        margin-bottom: 35px;
    }
    
    .service-card {
        margin-bottom: 20px;
        padding: 25px;
    }
    
    .education-card {
        margin-bottom: 30px;
        padding: 25px;
    }
    
    .certifications-grid {
        margin-top: 30px;
        gap: 15px;
    }
    
    .certification-card {
        padding: 20px;
    }
    
    .testimonial-item {
        margin-bottom: 35px;
        padding: 25px;
    }
    
    .process-step {
        margin-bottom: 35px;
    }
    
    .step-content {
        padding: 25px;
    }
    
    .blog-card {
        margin-bottom: 20px;
    }
    
    .blog-content {
        padding: 20px;
    }
    
    .contact-form {
        margin-top: 35px;
        padding: 25px;
    }
    
    /* Button spacing */
    .mt-4 {
        margin-top: 1.25rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.25rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2.5rem !important;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
}

/* Extra Small Devices (Up to 575px) - MOBILE PORTRAIT */
@media (max-width: 575px) {
    .section-padding {
        padding: 60px 0;
    }
    
    #home.hero-section {
        padding: 80px 0 60px;
    }
    
    .section-header {
        margin-bottom: 35px;
    }
    
    .section-header.text-center {
        margin-bottom: 40px;
    }
    
    .section-title {
        font-size: 1.9rem;
        margin-bottom: 12px;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .about-content {
        margin-bottom: 25px;
    }
    
    .about-info {
        margin-top: 25px;
        margin-bottom: 15px;
        padding: 20px;
    }
    
    .skills-grid {
        margin-top: 15px;
        gap: 15px;
    }
    
    .skill-card {
        padding: 20px;
    }
    
    .project-card {
        margin-bottom: 15px;
    }
    
    .project-content {
        padding: 15px;
    }
    
    .timeline {
        margin-top: 25px;
        margin-left: 5px;
    }
    
    .timeline-item {
        margin-bottom: 30px;
    }
    
    .service-card {
        margin-bottom: 15px;
        padding: 20px;
    }
    
    .education-card {
        margin-bottom: 25px;
        padding: 20px;
    }
    
    .certifications-grid {
        margin-top: 25px;
        gap: 12px;
    }
    
    .certification-card {
        padding: 15px;
    }
    
    .testimonial-item {
        margin-bottom: 30px;
        padding: 20px;
    }
    
    .process-step {
        margin-bottom: 30px;
    }
    
    .step-content {
        padding: 20px;
    }
    
    .blog-card {
        margin-bottom: 15px;
    }
    
    .blog-content {
        padding: 15px;
    }
    
    .contact-form {
        margin-top: 30px;
        padding: 20px;
    }
    
    /* Button spacing */
    .mt-4 {
        margin-top: 1rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
}

/* Very Small Devices (Up to 375px) */
@media (max-width: 375px) {
    .section-padding {
        padding: 50px 0;
    }
    
    #home.hero-section {
        padding: 70px 0 50px;
    }
    
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-header.text-center {
        margin-bottom: 35px;
    }
    
    .section-title {
        font-size: 1.7rem;
    }
    
    .about-info {
        padding: 15px;
    }
    
    .skill-card {
        padding: 15px;
    }
    
    .project-content {
        padding: 12px;
    }
    
    .service-card {
        padding: 15px;
    }
    
    .education-card {
        padding: 15px;
    }
    
    .certification-card {
        padding: 12px;
    }
    
    .testimonial-item {
        padding: 15px;
    }
    
    .step-content {
        padding: 15px;
    }
    
    .blog-content {
        padding: 12px;
    }
    
    .contact-form {
        padding: 15px;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Landscape Mode Optimization */
@media (max-width: 991px) and (orientation: landscape) {
    .section-padding {
        padding: 60px 0;
    }
    
    #home.hero-section {
        padding: 80px 0 60px;
    }
    
    .section-header {
        margin-bottom: 35px;
    }
}

/* Print Mode */
@media print {
    .section-padding {
        padding: 50px 0 !important;
    }
    
    #home.hero-section {
        padding: 50px 0 !important;
    }
    
    .container {
        padding: 0 !important;
    }
    
    .row {
        margin: 0 !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .section-padding {
        background-color: #1a1a1a;
    }
    
    .bg-light {
        background-color: #2d2d2d !important;
    }
    
    @media (max-width: 768px) {
        .section-padding {
            padding: 80px 0;
        }
    }
}

/* High Resolution Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .section-padding {
        padding: 110px 0;
    }
    
    @media (max-width: 768px) {
        .section-padding {
            padding: 85px 0;
        }
    }
}

/* Animation delay adjustments for mobile */
@media (max-width: 768px) {
    .education-card,
    .certification-card,
    .service-card,
    .project-card {
        animation-delay: 0s !important;
    }
}